<template>
	<view class="container" v-if="isShowPage">
		<view class="bg">
			<image :src="detail.coverImage" mode="widthFix" />
		</view>
		<view class="info_main">
			<view class="title">{{ detail.goodsName }}</view>
			<view class="price">
				<view class="custom_price">¥{{ detail.price }}</view>
				<view class="spec_price" v-if="userInfo.userRole > 0">
					<text class="text">猛将价</text>
					<text class="price_text">¥ {{ detail.fighterPrice }}</text>
				</view>
			</view>
			<!-- <view class="label">
        <view class="icon">
          <image class="img1" src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_date.png" mode="scaleToFill" />
        </view>
        <view class="label_text">{{ detail.createTime + " 至 " + detail.endTime }}</view>
      </view> -->
			<view class="label">
				<view class="icon">
					<image
						class="img2"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_addr.png"
						mode="scaleToFill"
					/>
				</view>
				<view class="label_text">{{ detail.studyAddress || detail.addressInfo }}</view>
			</view>
			<view class="label">
				<view class="icon">
					<image
						class="img3"
						src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_smile.png"
						mode="scaleToFill"
					/>
				</view>
				<view class="label_text">{{ detail.aimPeople }}</view>
			</view>
			<view class="infro">
				<u-tabs-swiper
					@change="tabsChange"
					:barStyle="{ 'background-color': '#F95513' }"
					active-color="#000"
					inactive-color="#797979"
					:bar-width="84"
					class="s_swiper"
					ref="tabs"
					:current="swiperCurrent"
					:list="list"
					:is-scroll="false"
				></u-tabs-swiper>
				<view class="detail">
					<!-- <view class="title">课程详情</view> -->
					<image v-for="(t, idx) in detail.detailImage" class="detail_img" :key="idx" :src="t" mode="widthFix" />
					<view class="content">
						<!-- <view class="content_title">课程简介</view> -->
						<view class="content_text">
							{{ detail.goodsInfo }}
						</view>
						<!-- <view class="content_title">课程目标</view>
                  <view class="content_text">
                    色彩是视觉艺术的基础，是绘画艺术的灵魂，是美术教育的重要内容。色彩教育是美术教育的重要组成部分，是美术教育的重要内容。色彩教育是美术教育的重要组成部分，是美术教育的重要内容。
                  </view>
                  <view class="content_title">课程内容</view>
                  <view class="content_text">
                    色彩是视觉艺术的基础，是绘画艺术的灵魂，是美术教育的重要内容。色彩教育是美术教育的重要组成部分，是美术教育的重要内容。色彩教育是美术教育的重要组成部分，是美术教育的重要内容。
                  </view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="star" @click="toStart">
				<image
					src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_star_success.png"
					v-if="detail.ifCollection"
					mode="scaleToFill"
				/>
				<image src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_star.png" v-else mode="scaleToFill" />
			</view>
			<view class="teach_btn" @click="toSubmit">加入研学</view>
		</view>
		<insteresting ref="insteresRef" />
	</view>
</template>

<script>
import indexApi from '@/api/yanxue/indexPage'
import insteresting from './insteresting.vue'
export default {
	components: { insteresting },
	data() {
		return {
			swiperCurrent: 0,
			list: [
				{
					name: '商品详情'
				}
				//   {
				//     name: '须知'
				//   }
			],
			detail: {
				// title: "【色语】色彩师训第一期",
				// price: "998",
				// old_price: "898",
				// date: "2024/05/27-05/30",
				// addr: "杭州市·画霸美院（荣美术馆校区）",
				// classify: "少儿美术教师 、教学主管、 校长等",
				// info: "详情",
			},
			userInfo: {},
			id: '',
			scenObj: {},
			isShowPage: false
		}
	},
	onLoad(options) {
		this.userInfo = this.$store.state.user.userInfo
		if (options.id) {
			this.id = options.id
			this.getInfo(options.id)
		}
		if (options.uid) {
			// 邀请人id
			this.scenObj = options
		}
	},
	onUnload() {
		// 进入详情获取version
		indexApi.enterDetail({ goodsId: this.id }).then(res => {
			// 记录离开详情页操作
			indexApi.getleaveDetail({ goodsId: this.id, version: res.result })
		})
	},
	methods: {
		toSubmit() {
			let obj = {
				id: this.id,
				goodsName: this.detail.goodsName,
				...this.scenObj
			}
			this.$navTo('pagesA/yanxue/yanxue_check', obj)
		},
		toStart() {
			indexApi.collect({ id: this.id }).then(res => {
				this.detail.ifCollection = !this.detail.ifCollection
				uni.showToast({
					title: this.detail.ifCollection ? '收藏成功' : '已取消收藏',
					icon: 'none'
				})
			})
		},
		getInfo(id) {
			indexApi.projectInfo({ id: id }).then(res => {
				res.result.detailImage = res.result.detailImage.split(',')
				this.isShowPage = true
				this.detail = res.result
				this.$nextTick(() => {
					this.$refs.insteresRef.detail = res.result
					this.$refs.insteresRef.id = id
					this.$refs.insteresRef.isInsterset = !res.result.ifSurvey
				})
			})
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态 getGoodsInfo
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current
			this.$refs.uTabs.setFinishCurrent(current)
			this.swiperCurrent = current
			this.current = current
		},
		tabsChange(index) {
			this.swiperCurrent = index
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
}

.bg {
	width: 100%;
	// min-height: 208px;
	// position: fixed;

	image {
		width: 100%;
	}
}

.info_main {
	background-color: #fff;
	padding: 27px 0;
	// position: absolute;
	// top: 185px;
	border-radius: 20px;
	width: 100%;

	.title {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 21px;
		color: #000000;
		padding: 0 27px;
	}

	.price {
		display: flex;
		align-items: center;
		margin-top: 21px;
		margin-bottom: 18px;
		padding: 0 27px;

		.custom_price {
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 21px;
			color: #000000;
			margin-right: 13px;
		}

		.spec_price {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 136px;
			height: 27px;
			background: #a2ff00;
			border-radius: 12px;
			border: 1px solid #000000;

			.text {
				margin-right: 3px;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 14px;
				color: #000000;
			}

			.price_text {
				color: #ff6a3a;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 24px;
				color: #000000;
			}
		}
	}

	.label {
		display: flex;
		align-items: center;
		margin-top: 10px;
		padding: 0 27px;
		.icon {
			width: 35px;
			height: 35px;
			background: #fdfdfd;
			box-shadow: 0px 2px 10px 0px rgba(52, 52, 52, 0.2);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			margin-bottom: 11px;

			.img1 {
				width: 20px;
				height: 22px !important;
			}

			.img2 {
				width: 18px;
				height: 23px !important;
			}

			.img3 {
				width: 21px;
				height: 21px !important;
			}
		}

		.label_text {
			font-size: 14px;
			color: #333;
		}
	}

	.infro {
		margin-top: 20px;

		.s_swiper {
			width: 102px;
			margin: 0 auto;
		}

		.detail {
			width: 750rpx;
			.detail_img {
				width: 750rpx;
				margin-bottom: 20rpx;
			}
			.title {
				font-size: 16px;
				color: #333;
				font-weight: bold;
				margin-bottom: 10px;
			}

			.content {
				.content_title {
					font-size: 14px;
					color: #333;
					font-weight: bold;
					margin-top: 10px;
				}

				.content_text {
					font-size: 14px;
					color: #666;
					margin-top: 10px;
				}
			}
		}
	}
}

.bottom {
	position: fixed;
	bottom: 0;
	height: 93px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: 10px 0;

	.star {
		width: 46px;
		height: 46px;
		background: #f4f4f6;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 14px;

		image {
			width: 23px;
			height: 23px;
		}
	}

	.teach_btn {
		width: 276px;
		height: 46px;
		background: #a2ff00;
		border-radius: 23px;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 14px;
		color: #000000;
		line-height: 46px;
		text-align: center;
	}
}
</style>
